<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../css/animate.min.css">
  <link rel="stylesheet" href="../css/bootstrap.min.css">
  <link rel="stylesheet/less" href="../css/common.less">
  <link rel="stylesheet/less" href="../css/gallery1.less">
  <link rel="stylesheet/less" href="../css/reset.less">
</head>

<body>
  <!-- 头部信息 -->
  <div id="head">
    <div class="container">
      <div class="left">
        <div class="item">
          <span class="iconfont">&#xeb40;</span>
          <span>Mon-Friday 9am -5pm</span>
        </div>
        <div class="item">
          <span class="iconfont">&#xe611;</span>
          <span>123-123-123</span>
        </div>
        <div class="item">
          <span class="iconfont">&#xe604;</span>
          <span>email@domain.com</span>
        </div>
      </div>
      <div class="right">
        <div class="icon"><span class="iconfont">&#xe689;</span></div>
        <div class="icon"><span class="iconfont">&#xe87f;</span></div>
        <div class="icon"><span class="iconfont">&#xe883;</span></div>
        <div class="icon"><span class="iconfont">&#xe60b;</span></div>
      </div>
    </div>
  </div>
  <!-- 导航栏 -->
  <div id="header">
    <nav class="navbar navbar-default navbar-white" id="navbar-white">
      <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
            data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Karting <span>Arena</span></a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="../index.html">首页</a></li>
            <li><a href="./about.html">关于我们</a></li>
            <li><a href="./services.html">服务</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                aria-expanded="false">画廊 <span class="caret"></span></a>
              <ul class="dropdown-menu dropdown-menu-left">
                <li class="dropdown ">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                    aria-expanded="false">网格布局 <span class="caret"></span></a>
                  <ul class="dropdown-menu dropdown-menu-right er">
                    <li><a href="./gallery1.html">2 列</a></li>
                    <li><a href="#">3 列</a></li>

                  </ul>
                </li>
              </ul>
            </li>
            <li class="dropdown ">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                aria-expanded="false">博客 <span class="caret"></span></a>
              <ul class="dropdown-menu dropdown-menu-left">
                <li><a href="#">右栏</a></li>
                <li><a href="#">一个博客</a></li>
              </ul>
            </li>
            <li><a href="#">联系我们</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>
  </div>
  <!-- 轮播图 -->
  <div id="slide">
    <div class="slide_img ">
      <img src="../image/t1.jpg" alt="" srcset="" id="slide-img">
    </div>
    <div class="slide_content">
      <h1 class="wow fadeInUp" data-wow-delay="1s">关于我们</h1>
      <div class="a">
        <a href="../index.html">首页</a>
        <span>&gt;</span>
        <span>画廊2列</span>
      </div>
    </div>

  </div>
  <div id="col-6-section">
    <div class="col-img">
      <img src="../image/t2.jpg" alt="" srcset="">

      <div class="mb">
        <h1>壁纸传说</h1>
        <p>壁纸</p>
      </div>
    </div>
    <div class="col-img">
      <img src="../image/t3.jpg" alt="" srcset="">
      <div class="mb">
        <h1>壁纸传说</h1>
        <p>壁纸</p>
      </div>
    </div>
    <div class="col-img">
      <img src="../image/t4.jpg" alt="" srcset="">
      <div class="mb">
        <h1>壁纸传说</h1>
        <p>壁纸</p>
      </div>
    </div>
    <div class="col-img">
      <img src="../image/t5.jpg" alt="" srcset="">
      <div class="mb">
        <h1>壁纸传说</h1>
        <p>壁纸</p>
      </div>
    </div>
    <div class="col-img">
      <img src="../image/t6.jpg" alt="" srcset="">
      <div class="mb">
        <h1>壁纸传说</h1>
        <p>壁纸</p>
      </div>
    </div>
    <div class="col-img">
      <img src="../image/t7.jpg" alt="" srcset="">
      <div class="mb">
        <h1>壁纸传说</h1>
        <p>壁纸</p>
      </div>
    </div>
    <div class="col-img lunbt wow fadeInUp" data-wow-delay=".5s">
      <img src="../image/t8.jpg" alt="" srcset="">
      <img src="../image/t9.jpg" alt="" srcset="">
      <div class="mb">
        <h1>壁纸传说</h1>
        <p>壁纸</p>
      </div>
      <div class="cire">
        <span class="cire1"></span>
        <span class="cire2"></span>
      </div>
    </div>
    <div class="col-img lunbt wow fadeInUp" data-wow-delay=".5s">
      <img src="../image/t10.jpg" alt="" srcset="">
      <img src="../image/t11.jpg" alt="" srcset="">
      <div class="mb">
        <h1>壁纸传说</h1>
        <p>壁纸</p>
      </div>
      <div class="cire">
        <span class="cire1"></span>
        <span class="cire2"></span>
      </div>
    </div>
    <div class="col-img lunbt wow fadeInUp" data-wow-delay=".5s">
      <img src="../image/t12.jpg" alt="" srcset="">
      <img src="../image/t13.jpg" alt="" srcset="">
      <div class="mb">
        <h1>壁纸传说</h1>
        <p>壁纸</p>
      </div>
      <div class="cire">
        <span class="cire1"></span>
        <span class="cire2"></span>
      </div>
    </div>
    <div class="col-img lunbt wow fadeInUp" data-wow-delay=".5s">
      <img src="../image/t14.jpg" alt="" srcset="">
      <img src="../image/t15.jpg" alt="" srcset="">
      <div class="mb">
        <h1>壁纸传说</h1>
        <p>壁纸</p>
      </div>
      <div class="cire">
        <span class="cire1"></span>
        <span class="cire2"></span>
      </div>
    </div>
  </div>
  <div id="buttom">
    <div class="container">
      <div class="top">
        <div class="buttom">
          <div class="logo">
            Karting <span>Arena</span>
          </div>
          <div class="conte">
            <p>幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征。我不认为这是一种暂时的意外，但我认为这是一种巨大的意外。</p>
            <div class="icon">
              <div class="icon1"><span class="iconfont">&#xe689;</span></div>
              <div class="icon1"><span class="iconfont">&#xe87f;</span></div>
              <div class="icon1"><span class="iconfont">&#xe883;</span></div>
              <div class="icon1"><span class="iconfont">&#xe60b;</span></div>
            </div>
          </div>
        </div>
        <div class="buttom">
          <div class="a">有用的服务</div>
          <div class="a1">
            <a href="javascript:;">教练</a>
            <a href="javascript:;">车辆</a>
            <a href="javascript:;">预订</a>
            <a href="javascript:;">道路</a>
            <a href="javascript:;">折扣</a>
          </div>
        </div>
        <div class="buttom">
          <div class="b">需要帮忙吗?</div>
          <div class="b1">
            <div class="item">
              <span class="iconfont">&#xe604;</span>
              <span>email@domain.com</span>
            </div>
            <div class="item">
              <span class="iconfont">&#xe611;</span>
              <span>123-123-123</span>
            </div>
            <div class="item">
              <span class="iconfont">&#xefec;</span>
              <span>knowledgeaware.tk</span>
            </div>

          </div>
        </div>
      </div>

      <div class="buttom1">
        <div class="left">
          <p>Copyright © 2024.Company name All rights reserved.</p>
        </div>
        <div class="right">
          <a href="javascript:;">教练</a>
          <a href="javascript:;">车辆</a>
          <a href="javascript:;">预订</a>
          <a href="javascript:;">道路</a>
          <a href="javascript:;">折扣</a>
        </div>
      </div>
    </div>
  </div>
  <div id="back">
    <a href="#head">
      <span class="glyphicon glyphicon-menu-up" aria-hidden="true"></span>
    </a>

  </div>
  <div id="jiazhai">
    <img src="../image/ajax-loader.gif" alt="" srcset="">
  </div>
</body>

</html>
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/less.min.js"></script>
<script src="../js/wow.min.repeat.js"></script>
<script src="../js/common.js"></script>
<script>
  var lunbtList = document.getElementsByClassName("lunbt")
  var i = [1, 1, 1, 1]
  var tp = [['../image/t8.jpg', '../image/t9.jpg'], ['../image/t10.jpg', '../image/t11.jpg'], ['../image/t12.jpg', '../image/t13.jpg'], ['../image/t14.jpg', '../image/t15.jpg']]
  for (let t = 0; t < lunbtList.length; t++) {
    setInterval(() => a(tp[t], t, i), 3000)
  }

  function a(p, t, i) {
    if (i[t] == 1) {
      lunbtList[t].children[1].style.opacity=1
      lunbtList[t].children[1].animate({
        left: 0
      }, 500, 'linear')
      setTimeout(()=>{
        lunbtList[t].children[1].style.opacity=0
        lunbtList[t].children[0].src = p[i[t]]
      lunbtList[t].children[1].src = p[0]
      lunbtList[t].children[3].children[1].className = 'cire1'
      lunbtList[t].children[3].children[0].className = 'cire2'
      i[t] = 0
      },500)
     

    } else {
      lunbtList[t].children[1].style.opacity=1
      lunbtList[t].children[1].animate({
        left: 0
      }, 500, 'linear')
      setTimeout(()=>{
         lunbtList[t].children[1].style.opacity=0
        lunbtList[t].children[0].src = p[i[t]]
      lunbtList[t].children[1].src = p[1]
      lunbtList[t].children[3].children[0].className = 'cire1'
      lunbtList[t].children[3].children[1].className = 'cire2'
      i[t]++
      },500)
      
    }

  }
</script>